<template>
  <div>
    <ConTitle :topTitle="topTitle"></ConTitle>
    <template>
      <el-table :data="usageList" style="width: 100%">
        <el-table-column
          type="index"
          width="120"
          label="序号"
        ></el-table-column>
        <el-table-column prop="id" label="充值ID"> </el-table-column>
        <el-table-column prop="address" label="日期">
          <template slot-scope="scope">
            {{ scope.row.cTime | formatime }}
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="充值金额"> </el-table-column>

        <el-table-column prop="desc" label="备注"> </el-table-column>
      </el-table>
    </template>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.currPage"
      :page-sizes="[2, 4, 5, 10]"
      :page-size="query.pageSize"
      layout=" prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
$usageList;
import ConTitle from "@/components/ConTitle.vue";
import { $usageList } from "@/api";
import moment from "moment";
export default {
  name: "UseAge",
  data() {
    return {
      topTitle: {
        type: "计费", //非首页，显示上一级
        text: "使用记录",
        msg: "统计当前账户每天消耗的消息额度总数，可查看历史月份的使用记录",
      },
      usageList: [],
      total: 0, //数据总条数
      query: {
        currPage: 1, //当前页数,
        pageSize: 5,
      },
    };
  },
  components: {
    ConTitle,
  },
  mounted() {
    this.getData();
  },
  filters: {
    formatime(value) {
      return moment(value).format("YYYY-MM-DD");
    },
    typefn(value) {
      return value ? "在线" : "离线";
    },
  },
  methods: {
    getData() {
      $usageList(this.query).then((res) => {
        console.log(res);
        this.usageList = res.data;
        this.total = res.total;
      });
    },
    handleSizeChange(value) {
      this.query.pageSize = value;
      this.query.currPage = 1;
      this.getData();
      console.log("每页改变条数");
    },
    handleCurrentChange(page) {
      console.log("每页改变条数");
      this.query.currPage = page;
      this.getData();
    },
  },
};
</script>

<style lang="scss" scoped>
.el-pagination {
  background: white;
  text-align: center;
    height: 50px;
      line-height: 50px;
      padding-top: 20px;
}
</style>